@import "../../modules/icon/fonts/iconfont.css";
@import "../../modules/sass/variables.scss";

html,
body {
  width: 100%;
  overflow-x: hidden;
  background: $theme-gray200-color;
}

body .form .weui-btn {
  margin-top: 0px;
}



.document {
  height: 100vh;
  background: url('//www.5chelib.com/mobile/static/5cbg.png') no-repeat;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-size: 100% 100%;

  .logo {
    padding-left: 20px;
    padding-top: 20px;
    width: 20%;
  }

  .people {
    text-align: center;

    img {
      width: 50%;
    }

  }

  .text {
    text-align: center;

    img {
      width: 50%;
    }
  }

  .form {
    .weui-cells {
      border: 1px solid #d32f2f;
      border-radius: 20px;
      width: 80%;
      text-align: center;
      margin: 10px auto;
    }
    .weui-cells:after{
      border-bottom: 1px solid #d32f2f;
    }

  }

  .book {
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 20px;
  }

  .read {
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 20px;

  }
}


@media screen and (max-height: 700px) {

  .document {
  .logo{
    margin-bottom: -30px;
  }

  .logo {
    padding-left: 20px;
    padding-top: 20px;
    width: 20%;
  }

  .people {
    text-align: center;

    img {
      width: 40%;
    }

  }

  .text {
    text-align: center;

    img {
      width: 40%;
    }
  }

  .form {
    .weui-cells {
      border: 1px solid #d32f2f;
      border-radius: 20px;
      width: 80%;
      text-align: center;
      margin: 10px auto;
    }
    .weui-cells:after{
      border-bottom: 1px solid #d32f2f;
    }

  }

  .book {
    width: 30%;
    position: absolute;
    bottom: 0;
    left: 20px;
  }

  .read {
    width: 20%;
    position: absolute;
    bottom: 0;
    right: 20px;

  }
}

}
